<template>
	<view>
		<view class="header">
			<u-search placeholder="请输入关键字" shape="square" v-model="keyword" :showAction="false"></u-search>
		</view>
		<view class="content">
			<view class="side">
				<view v-for="(item,index) in sidelist" :key="item.id" @click="cate(index)"
					:class="Index==index?'active':''">
					{{item.catename}}
				</view>
			</view>
			<view class="right">
				<view>
					<u-grid :border="false">
						<u-grid-item v-for="item in baseList" :key="item.id" @click="gocatelist(item.id)">
							<u--image width="80px" height="80px" :src="item.img" shape="circle"></u--image>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCates
	} from '../../request/app.js'
	export default {
		data() {
			return {
				keyword: '',
				baseList: [],
				sidelist: [],
				Index: 0
			}
		},
		onLoad() {
			this.getcates()
		},
		methods: {
			cate(index) {
				console.log(index, '111');
				console.log(this.sidelist, '12345');
				this.baseList = this.sidelist[index].children.map(item => ({
					img: this.$imgUrl + item.img,
					title: item.catename,
					id: item.id
				}))
				this.Index = index
			},
			async getcates() {
				let res = await getCates()
				console.log(res, '全部分类信息');
				if (res.data.code == 200) {
					this.sidelist = res.data.list
					// console.log(this.sidelist);
					this.baseList = res.data.list[0].children.map(item => ({
						img: this.$imgUrl + item.img,
						title: item.catename,
						id: item.id
					}))
					// console.log(this.baseList);
				}
			},
			gocatelist(id) {
				console.log(id, 'catelist');
				uni.navigateTo({
					url: '/pages/catelist/catelist?id=' + id + '&type=' + 2
				})
			}

		}
	}
</script>

<style>
	.active {
		color: #3399FF;
	}

	page {
		background-color: #eee;
	}

	.header {
		background-color: #FF6633;
		height: 100rpx;
		padding: 20rpx 0 10rpx 0;
		box-sizing: border-box;
	}

	.content {
		display: flex;
	}

	.content .side {
		width: 160rpx;
		min-height: 100vh;
		background-color: #fff;
		text-align: center;
		color: #999999;
		line-height: 150rpx;
	}

	.content .right {
		width: 550rpx;
		height: 500rpx;
		margin: 20rpx 0 0 20rpx;
		background-color: #fff;
	}
</style>
